<!DOCTYPE HTML> 
<html>          
<body>         
<canvas id="canvas" width="600" height="400">             
<p>                 
Your browserdoes not support the canvas element!             
</p>         
</canvas>         
<script type="text/javascript">
            var canvas = document.getElementById("canvas");
            var context2D = canvas.getContext("2d");
            var pic = new Image();
            pic.src = "http://www.html5cn.org/temp/logo_b1.png"; 
           //注意目录结构，这里是把图片和html放在一个目录的
            //注意下面方法中画笔状态的保护，这在很多情况下都会使用到
            function draw() {
                context2D.clearRect(0, 0, 600, 400);
                context2D.save(); //保存画笔状态
                //context2D.translate(600 / 2 * Math.random(), 400 / 2 * Math.random()); //开始移动画笔
                context2D.translate(600 / 2 * Math.random(), 30); //开始移动画笔
                context2D.drawImage(pic, 0, 0);
                context2D.restore(); //绘制结束以后，恢复画笔状态
            }
            setInterval(draw, 100); //设置画图间隔时间
        </script>     
</body>  
</html>